import React, {Component} from 'react';
import PropTypes from 'prop-types';
import {createMuiTheme, MuiThemeProvider, withStyles} from '@material-ui/core/styles';
import {TextField, Button, Select, MenuItem, FormControl, InputLabel, Grid} from '@material-ui/core';
import QRCode from 'qrcode'

const theme = createMuiTheme({
    typography: {
        useNextVariants: true,
    },
});

const styles = theme => ({
    form: {
        marginTop: 15
    },
    canvas: {
        width:'100%',
        border: '1px solid #555'
    },
    formControl:{
        marginTop:12
    }
});


class Qrcode extends Component {

    state = {
        size: 350,
        level: 'H',
        text: '默认内容'
    };

    handleChange = (e) => {
        this.setState({
            level: e.target.value
        })
    };

    textInput = (e) => {
        let val = e.target.value;
        if (e.target.name === 'size') {
            val = val > 700 ? 700 : val;
        }
        this.setState({
            [e.target.name]: val
        })
    };

    toQrcode() {
        const canvas = document.getElementById('canvas');
        QRCode.toCanvas(canvas, this.state.text, {
            width: this.state.size,
            height: this.state.size,
            errorCorrectionLevel: this.state.level
        }, (error) => {
            if (error) {
                alert(error);
            }

        })
    }

    componentDidMount(){
        this.toQrcode()
    }

    render() {
        const {classes} = this.props;

        return (
            <MuiThemeProvider theme={theme}>
                <Grid container spacing={24}>
                    <Grid item xs={12} sm={8} lg={6}>
                        <Button variant="contained" color="primary" onClick={this.toQrcode.bind(this)}>转二维码</Button>
                        <form autoComplete='off' className={classes.form}>
                            <FormControl fullWidth>
                                <InputLabel>级别</InputLabel>
                                <Select
                                    label='级别'
                                    value={this.state.level}
                                    onChange={this.handleChange}
                                >
                                    <MenuItem value='H'>H</MenuItem>
                                    <MenuItem value='Q'>Q</MenuItem>
                                    <MenuItem value='M'>M</MenuItem>
                                    <MenuItem value='L'>L</MenuItem>
                                </Select>
                            </FormControl>
                            <FormControl fullWidth className={classes.formControl}>
                                <TextField defaultValue={this.state.size} name='size' onInput={this.textInput}
                                           label='尺寸(最大700)'/>
                            </FormControl>
                            <FormControl fullWidth className={classes.formControl}>
                                <TextField multiline rows={5} defaultValue={this.state.text} name='text'
                                           onInput={this.textInput} label='内容'/>
                            </FormControl>
                        </form>
                    </Grid>
                    <Grid item sm={12} lg={6}>
                        <canvas id="canvas" className={classes.canvas}/>
                    </Grid>
                </Grid>
            </MuiThemeProvider>
        )
    }
}

Qrcode.propTypes = {
    classes: PropTypes.object.isRequired,
};


export default withStyles(styles)(Qrcode);